<template>
	<view class="body" >
		<!-- 左边的scrollView开始 -->
		<scroll-view scroll-y class="left-view" >
			<view class="left-tit" v-for="(item,index) in leftTit" :key="index" :class="leftIndex == index ? 'left-tit-select' : '' " @click="clickLeft(index,item.store_cats)" >
				<view v-if="leftIndex == index" class="left-border" ></view>
				{{item.store_cats}}
			</view>
		</scroll-view>
		<!-- 左边的scrollView结束 -->
		
		<!-- 右边的scrollView开始 -->
		<scroll-view scroll-with-animation scroll-y class="right-view">
			<view class="right-item"  v-for="(item,index) in storeList" :key="index" @click="navTo(item)" >
				<view style="position: relative;">
					<image :src="item.store_log" mode="aspectFill" ></image>
					<view v-if="item.is_advertising_store == 2" class="taps">
						<text v-if="item.subsidy_type == 'per'">补贴{{item.subsidy_point}}个点</text>
						<text v-else>补贴{{item.subsidy_point}}元</text>
					</view>
				</view>
				<view>
					<view class="name" >{{item.store_name}}</view>
					<view class="text1" >联系电话:<text>{{item.store_principal_phone}}</text></view>
					<view class="text1 address" >地址:<text>{{item.address}}</text></view>
					<view class="detail" >
						<view class="title" >{{item.is_advertising_store == 1? '广告':'实体商家'}}</view>
						<view class="detail-btn" @click.stop="navToMap(item)">导航去商家</view>
					</view>
				</view>
			</view>
			
			<!-- 占位用的 -->
			<view style="height: 40px;" ></view>
		</scroll-view>
		<!-- 右边的scrollView结束 -->
	</view>
</template>

<script>
	export default{
		data(){
			return{
				leftTit: [],
				leftIndex: 0   ,//当前点击的左边栏的下标
				storeList:[],
			}
		},
		onShow(){
			if(getApp().globalData.showDialog){
				this.leftIndex = getApp().globalData.showDialog;
			}
		},
		onLoad() {
			this.getCatName()
		},
		methods:{
			navToMap(item){
				uni.openLocation({
				    latitude: Number(item.lat),
				    longitude:  Number(item.long),
					name:item.store_name,
					address:item.address,
				    success: function () {
				        console.log('success');
				    },
					fail:function(res){
						console.log('res',res)
					}
				});
			},
			getCatName(){
				this.$https.Classification.storeType().then(req => {
					
					this.leftTit = req
					const id = this.leftTit[this.leftIndex].store_cats;
					this.getList(id)
				})
			},
			
			getList(id){
				this.$https.Classification.typeStoreList(id).then(req => {
					this.storeList = req;
				})
			},
			
			clickLeft(index,id){  //左侧scrollView点击
				this.leftIndex = index
				this.getList(id)
			},
			navTo(item){  //跳转到商品详情
				uni.navigateTo({
					url: '/pages/Store/storeGoods?data='+JSON.stringify(item)
				})
			}
		}
	}
</script>

<style lang="scss" >
	
	page,.body{
		width: 100%;
		height: 100%;

		background-color: #FFFFFF;
		
		border-top: 10rpx solid rgb(250,250,250);
	}
	
	.body{
		display: flex;
	}
	
	.left-view{
		
		width: 200rpx;
		height: 100%;
		
		border-right: 10rpx solid rgb(250,250,250);
		
		.left-tit{
			
			position: relative;
			
			height: 100rpx;
			line-height: 100rpx;
			
			border-bottom: 1rpx solid rgb(240,240,240);
			background-color: #FFFFFF;
			text-align: center;
		}
		
		.left-tit-select{
			
			background-color: rgb(250,250,250);
			color: $uni-color-error;
		}
		
		.left-border{
			
			position: absolute;
			top: 30%;
			
			height: 40rpx;
			width: 8rpx;
			
			border-radius: 0 8rpx 8rpx 0;
			
			background-color: $uni-color-error;
		}
	}
	
	.right-view{
		
		
		background-color: rgb(250,250,250);
		
		.right-item{
			
			display: flex;
			align-items: center;
			
			margin: 16rpx 0 16rpx 16rpx;
			padding: 10rpx;
			
			background-color: #FFFFFF;
			&:first-child{
				margin-top: 0;
			}
			
			image{
				
				width: 180rpx;
				height: 180rpx;
			}
			view{
				margin: 0 0 8rpx 10rpx;
				
				text-align: left;
			}
			
			.text1{
				color: #666;
			}
			
			.detail{
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				
				margin-left: 0;
				
				.detail-btn{
					
					padding: 8rpx 10rpx;
					
					font-size: $uni-font-size-base;
					color: #FFFFFF;
					background-color: $uni-color-error;
				}
			}
		}
	}
	
	.taps{
		position: absolute;
		right: 0;
		top: 0;
		background: #FFDD34;
		color: $uni-color-primary;
		font-size: 20upx;
		padding: 4upx 6upx;
		border-bottom-left-radius: 10upx;
	}
	.address{
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
	}
</style>
